<template>
  <div class="more-screen">
    <div id="viewDiv1" class="more-screen-item"></div>
    <div id="viewDiv2" class="more-screen-item"></div>
    <div id="viewDiv3" class="more-screen-item"></div>
    <div id="viewDiv4" class="more-screen-item"></div>
  </div>
</template>

<script>
import Map from "@arcgis/core/Map.js"; // 地图视图
import MapView from "@arcgis/core/views/MapView.js";
import Basemap from "@arcgis/core/Basemap";  // 定义地图数据
import TileLayer from "@arcgis/core/layers/TileLayer"; // 维地图视图
import * as watchUtils from "@arcgis/core/core/watchUtils.js"; // 监听地图的变化
export default {
  name: "moreScreen",
  mounted() {
    // 初始化地图
    this.initMap()
  },
  methods:{
    initMap() {
      // 使用切片图层
      let basemap = new Basemap({
        baseLayers: [
          new TileLayer({
            // 使用了公网发布的地图数据
            url: "http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
            title: "Basemap"
          })
        ],
        title: "basemap",
        id: "basemap"
      });
      const map1 = new Map({
        basemap
      })
      const mapView1 = new MapView({
        container: "viewDiv1",
        map: map1,
        zoom: 6,
        center: [101.561594,24.424146]
      })
      const map2 = new Map({
        basemap
      })
      const mapView2 = new MapView({
        container: "viewDiv2",
        map: map2,
        zoom: 6,
        center: [101.561594,24.424146]
      })
      const map3 = new Map({
        basemap
      })
      const mapView3 = new MapView({
        container: "viewDiv3",
        map: map3,
        zoom: 6,
        center: [101.561594,24.424146]
      })
      const map4 = new Map({
        basemap
      })
      const mapView4 = new MapView({
        container: "viewDiv4",
        map: map4,
        zoom: 6,
        center: [101.561594,24.424146]
      })
      // 删除默认控件
      mapView1.ui.components = [];
      mapView2.ui.components = [];
      mapView3.ui.components = [];
      mapView4.ui.components = [];
      // 监听地图实现地图联动
      watchUtils.whenTrue(mapView1,'stationary',function () {
        if (mapView1.center) {
          // 把投影坐标转成经纬度坐标 监听地图中心点 toScreen 把地理坐标转成屏幕坐标 toMap 把屏幕坐标转成地理坐标 goto 需要的经纬度坐标
          // goTo 实现地图跳转
          mapView2.goTo({
            center: [mapView1.center.longitude, mapView1.center.latitude]
          })
          mapView3.goTo({
            center: [mapView1.center.longitude, mapView1.center.latitude]
          })
          mapView4.goTo({
            center: [mapView1.center.longitude, mapView1.center.latitude]
          })
        }
        // 监听地图移动的范围
        if (mapView1.extent) {
          console.log(mapView1.extent);
        }
      })
    }
  }
}
</script>

<style scoped>
.more-screen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.more-screen-item {
  width: calc(50% - 10px);
  height: calc(50% - 10px);
  margin: 5px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
}
</style>